// eslint-disable-next-line import/no-unresolved
import React, {Component} from 'react';
import echarts from 'echarts'
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import {addResizeHook, removeHook} from "@/utils/resize";
import {Card, Col, DatePicker, Row} from "antd";
import moment from "moment";
import TieShuiFan from "./TieShuiFan";
import RuLuFan from "./RuLuFan";
import time, {currentTime, dateFormat, convertDateFromString} from "@/utils/time";
import {connect} from "react-redux";
import {trigger} from "@/utils/utils";
import {getLatestTime} from "@/services/indicator";

const {RangePicker} = DatePicker;

class ContentStatistics extends Component {

  stopLoop = false

  state = {
    // startTime: time.getStartOfDay(),
    // endTime: time.getEndOfDay(),
    // selectedStartTime: time.getStartOfDay(),
    // selectedEndTime: time.getEndOfDay()
  };


  async componentDidMount() {
    const resp = await getLatestTime({
      itemName: "HanFan",
    });
    const {start,end,current} = resp.detail
    let startTime = convertDateFromString(start)
    let endTime = convertDateFromString(end)
    let currentTime = convertDateFromString(current)
    this.setState({selectedStartTime:startTime,selectedEndTime:endTime,startTime,endTime})


    this.reqRef = requestAnimationFrame(() => {
      const {selectedStartTime, selectedEndTime} = this.state;
      trigger(
        (isFirst) => this.getStatisticsData(selectedStartTime, selectedEndTime,isFirst),
        new Date().valueOf(),
        60 * 1000,
        true,
        () => this.stopLoop);
    });
  }


  getStatisticsData = (startTime, endTime, refresh = false) => {
    const payload = {
      start: dateFormat(startTime),
      end: dateFormat(endTime),
      refresh
    };
    this.props.dispatch({
      type: 'hanfan/contentStatistics',
      payload
    });
  };


  timePick = (value) => {

  };


  render() {
    const {
      width = 100,
      height = 320
    }
      = this.props;

    const {startTime, endTime} = this.state;
    const format = 'YYYY-MM-DD HH';
    const {data, globalTime} = this.props;
    return (
      <div>
        <div style={{marginBottom: 20, marginLeft: 5}}>
          <RangePicker
            key={Math.random()} //强制刷新组件
            showTime={{format: 'HH'}}
            format={format}
            placeholder={['开始时间', '结束时间']}
            onOk={this.timePick}
            defaultValue={[moment(startTime, format), moment(endTime, format)]}
          />
        </div>
        <Row>
          <Col span={12} style={{paddingLeft: 8}}>
            <TieShuiFan hasParent
                        globalTime={globalTime}
                        chartId="tieShuiFan"
                        width={width}
                        height={height}/>
          </Col>
          <Col span={12} style={{paddingLeft: 8}}>
              <RuLuFan hasParent
                       globalTime={globalTime}
                       chartId="ruLuFan"
                       width={width}
                       height={height}/>
          </Col>
        </Row>
      </div>
    )
  }
}


export default connect(({hanfan, global}) => ({}))
(ContentStatistics);
